<template>
  <div class="detail">
    <el-dialog
        :visible.sync="dialogVisible"
        width="944px"
        max-width="1024px"
        :modal="false"
        :close-on-click-modal="false"
        :before-close="handleGoodClose">
      <div class="content">
        <div class="good-num">
          <div><img v-lazy="goodData.picUrl" alt=""></div>
          <div style="width: 100%">
            <div class="name">{{ goodData.name }}</div>
            <div class="num">
              <el-input-number v-model="num" :min="1" :max="goodData.storage"  @change="numChange"></el-input-number>
              <span style="float: right;font-size: 18px;min-width: 300px;text-align: right" v-if="goodData.name!='FreeTime'">Price：£ {{unit}}</span>
              <span style="float: right;font-size: 18px;min-width: 300px;text-align: right" v-else>Min: {{unit}}</span>
            </div>
            <div style="text-align: right;font-size: 18px">Total：£ {{totalNum}}</div>
            <el-tooltip placement="top" effect="light" :visible-arrow="true">
              <div slot="content" v-html="goodData.brief"></div>
              <div class="scrollbar" v-html="goodData.brief"></div>
            </el-tooltip>
            <div class="btn" style="justify-content: flex-start">
              <div>
                <el-button v-if="goodData.name=='TopUp'" @click="handlePayMent" type="text" class="button">TopUp</el-button>
                <el-button v-else-if="goodData.name=='FreeTime'" @click="handlePayMent" type="text" class="button">Relationship</el-button>
                <el-button v-else  @click="handlePayMent" type="text" class="button" :style="{background: goodData.vipOnly <= Number(userData.memberLevel)?'linear-gradient(90deg, #FFE96B 0%, #FFD55C 12%, #FFBC49 32%, #FFAA3C 53%, #FF9F34 75%, #FF9C32 100%)':'#efefef',textDecoration:goodData.vipOnly <= Number(userData.memberLevel)?'none':'line-through'}" :disabled="goodData.vipOnly > Number(userData.memberLevel)">{{(Number(userData.memberLevel) >= goodData.vipOnly)?'Buy':'Only for vip'}}</el-button>
              </div>
              <div>
                <el-button v-if="goodData.name!='TopUp'&&goodData.name!='FreeTime'&&cateName!=='Bundles'&&goodData.vipOnly <= Number(userData.memberLevel)" @click="handleAddCart" type="text" class="button">Add to cart</el-button>
              </div>
            </div>
          </div>
        </div>

        <div class="config">
          <div class="option" v-for="(item,key,i) in JSON.parse(goodData.specifications)" :key="i">
            <div v-if="key !== 'FoodExtra' && key !== 'DrinkExtra'&& cateName !== 'Bundles' && item.length > 0">
              <div class="title">{{ key }}</div>
              <el-radio-group v-model="selectedData[key]" @change="radioChange">
                <el-radio-button v-for="(data,index) in item" :label="data" :key="index"></el-radio-button>
              </el-radio-group>
            </div>
            <div v-if="(key == 'FoodExtra' || key == 'DrinkExtra')&& item.length > 0">
              <div class="title">Topping</div>
              <el-checkbox-group v-model="checkboxGroup[key]" @change="checkChange">
                <el-checkbox-button v-for="(data,index) in item" :label="data" :key="index">{{data}}</el-checkbox-button>
              </el-checkbox-group>
            </div>
            <div v-if="cateName === 'Bundles'&&key == 'coupon'&& item.length > 0">
              <div class="title">Coupon</div>
              <el-checkbox-group v-model="checkboxGroup[key]" @change="checkChange">
                <el-checkbox-button disabled v-for="(data,index) in item" :name="data.id" :key="index">{{ data.name }}</el-checkbox-button>
              </el-checkbox-group>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import calculation from "../utils/calculation";
import {mapState} from "vuex";

export default {
  name: "goodDetail",
  props: {
    dialogVisible: {
      type: Boolean,
      defaulted: false
    },
    goodData: {
      type: Object,
      defaulted: {}
    },
    cateName:{
      type:String,
      defaulted:''
    },
    userData:{
      type:Object,
      defaulted:{}
    },
  },
  data() {
    return {
      num: 0,
      selectedData: {},
      checkboxGroup: [],
      total:0,
      unit:0,
      totalNum:0,
    }
  },
  computed: {
    ...mapState({extraPrice: state => state.comData.extraPrice})
  },
  created() {
    let data = JSON.parse(this.goodData.specifications)
    for (let key in data) {
      if(key === 'FoodExtra' || key === 'DrinkExtra'){
        this.$set(this.checkboxGroup, key, [])
      }
    }
  },
  mounted() {
    let data = JSON.parse(this.goodData.specifications)
    let list = new Object()
    for (const key in data) {
      if(key !== 'FoodExtra' && key !== 'DrinkExtra'){
        list[key]=data[key][0]
      }
    }
    this.unit = Number(this.goodData.retailPrice)
    this.totalNum = Number(this.goodData.retailPrice)
    this.total = Number(this.goodData.retailPrice)
    this.selectedData = list
  },
  methods: {
    handleGoodClose() {
      this.$emit('handleGoodClose')
    },

    radioChange(){
      let extraPrice = JSON.parse(this.extraPrice)
      let unit = 0
      for (const key in this.selectedData) {
        if(extraPrice[this.selectedData[key]] !== undefined){
          unit = calculation.accAdd(extraPrice[this.selectedData[key]],unit)
        }
      }
      for (const key in this.checkboxGroup) {
        this.checkboxGroup[key].forEach(item => {
          if(extraPrice[item] !== undefined){
            unit = calculation.accAdd(extraPrice[item],unit)
          }
        })
      }
      unit = calculation.accAdd(this.unit,unit)
      this.totalNum = calculation.accMul(this.num, Number(unit))
    },
    checkChange(){
      let extraPrice = JSON.parse(this.extraPrice)
      let unit = 0
      for (const key in this.selectedData) {
        if(extraPrice[this.selectedData[key]] !== undefined){
          unit = calculation.accAdd(extraPrice[this.selectedData[key]],unit)
        }
      }
      for (const key in this.checkboxGroup) {
        this.checkboxGroup[key].forEach(item => {
          if(extraPrice[item] !== undefined){
            unit = calculation.accAdd(extraPrice[item],unit)
          }
        })
      }
      unit = calculation.accAdd(this.unit,unit)
      this.totalNum = calculation.accMul(this.num, Number(unit))
    },

    numChange(v){
      let extraPrice = JSON.parse(this.extraPrice)
      let unit = 0
      for (const key in this.selectedData) {
        if(extraPrice[this.selectedData[key]] !== undefined){
          unit = calculation.accAdd(extraPrice[this.selectedData[key]],unit)
        }
      }
      for (const key in this.checkboxGroup) {
        this.checkboxGroup[key].forEach(item => {
          if(extraPrice[item] !== undefined){
            unit = calculation.accAdd(extraPrice[item],unit)
          }
        })
      }
      unit = calculation.accAdd(this.unit,unit)
      this.totalNum = calculation.accMul(v, Number(unit))
      this.total = calculation.accMul(v, Number(unit))
    },

    handlePayMent() {
      let paymentData = {}
      let data = Object.assign({}, this.goodData)
      data.num = this.num
      let extraPrice = JSON.parse(this.extraPrice)
      let unit = 0
      for (const key in this.selectedData) {
        let newKey = key.toLowerCase()
        data[newKey] = this.selectedData[key]
        if(extraPrice[this.selectedData[key]] !== undefined){
          unit = calculation.accAdd(extraPrice[this.selectedData[key]],unit)
        }
        data.specifications = this.selectedData
      }
      if (JSON.stringify(this.selectedData) === '{}') {
        data.specifications = {}
      }
      for (const key in this.checkboxGroup) {
        let newKey = key.toLowerCase()
        data[newKey] = this.checkboxGroup[key]
        this.checkboxGroup[key].forEach(item => {
          if(extraPrice[item] !== undefined){
            unit = calculation.accAdd(extraPrice[item],unit)
          }
        })
        data.specifications[key] = this.checkboxGroup[key]
      }
      unit = calculation.accAdd(this.unit,unit)
      paymentData.total = calculation.accMul(this.num, Number(unit))
      data.total = calculation.accMul(this.num, Number(unit))
      paymentData.paymentData = data
      this.num = 0
      this.selectedData = {}
      this.$emit('handlePassword',paymentData)
    },

    handleAddCart() {
      let data = Object.assign({}, this.goodData)
      data.num = this.num
      let extraPrice = JSON.parse(this.extraPrice)
      let unit = 0
      for (const key in this.selectedData) {
        let newKey = key.toLowerCase()
        data[newKey] = this.selectedData[key]
        if(extraPrice[this.selectedData[key]] !== undefined){
          unit = calculation.accAdd(extraPrice[this.selectedData[key]],unit)
        }
        data.specifications = this.selectedData
      }
      if (JSON.stringify(this.selectedData) === '{}') {
        data.specifications = {}
      }
      for (const key in this.checkboxGroup) {
        let newKey = key.toLowerCase()
        data[newKey] = this.checkboxGroup[key]
        this.checkboxGroup[key].forEach(item => {
          if(extraPrice[item] !== undefined){
            unit = calculation.accAdd(extraPrice[item],unit)
          }
        })
        data.specifications[key] = this.checkboxGroup[key]
      }
      unit = calculation.accAdd(this.unit,unit)
      data.total = calculation.accMul(this.num, Number(unit))
      this.$store.dispatch('cart/addCart', data)
      this.num = 0
      this.selectedData = {}
      this.$emit('handleGoodClose')
    },
  }
}
</script>

<style scoped lang="scss">
.detail {
  ::v-deep .el-dialog {
    background: rgba(0, 0, 0, 0.9);
    border-radius: 42px;

    .el-dialog__body {
      color: #ffffff;
      padding: 0 24px;

      .good-num {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        border-bottom: 1px solid rgba(255, 255, 255, .3);
        padding-bottom: 27px;

        img {
          width: 264px;
          height: 264px;
          border-radius: 18px;
          margin-right: 29px;
        }

        .name {
          font-size: 32px;
          padding: 6px 0 20px;
        }

        .num {
          .el-input-number {
            width: 159px;
            height: 44px;
            border-radius: 24px;
            overflow: hidden;
            color: #ffffff;
          }

          .el-input {
            width: 159px;
            height: 44px;
            color: #ffffff !important;

            .el-input__inner {
              color: #ffffff;
              background: rgba(245, 245, 245, .1);
              border: none;
              height: 44px;
              line-height: 44px;
            }
          }

          .el-input-number__increase, .el-input-number__decrease {
            background: none;
            color: #ffffff;
            border: none;
            line-height: 44px;
            font-size: 22px;
            margin: 0 10px;
          }
        }

        .scrollbar{
          width: 600px;
          overflow:hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          -webkit-line-clamp: 6;
          -o-text-overflow:ellipsis;
        }

        .btn {
          margin-top: 28px;
          display: flex;
          justify-content: space-between;

          button {
            width: 223px;
            height: 59px;
            background: linear-gradient(90deg, #FFE96B 0%, #FFD55C 12%, #FFBC49 32%, #FFAA3C 53%, #FF9F34 75%, #FF9C32 100%);
            border-radius: 14px;
            padding: 0;
            color: #0C0C0C;
            border: none;
          }

          button:first-child {
            margin-right: 22px;
          }
        }
      }

      .config {
        padding-top: 18px;
        display: flex;
        flex-wrap: wrap;
        padding-bottom: 14px;

        .option {
          margin-right: 80px;
          padding-bottom: 24px;

          .is-active {
            .el-radio-button__inner {
              background: #FFD40E;
              color: #070707;
            }
          }
          .is-checked {
             .el-checkbox-button__inner {
               background: #FFD40E;
               color: #070707;
             }
           }
        }

        .title {
          font-size: 18px;
          padding-bottom: 6px;
        }

        .el-radio-button {
          margin-right: 10px;
          height: 36px;
          border-radius: 5px;

          .el-radio-button__inner {
            width: 100%;
            height: 100%;
            display: inline-block;
            background: no-repeat;
            color: #ffffff;
            box-shadow: none;
            border: 1px solid rgba(255, 255, 255, .7);
            border-radius: 4px;
          }
        }


        .el-checkbox-button {
          margin-right: 10px;
          height: 36px;
          border-radius: 5px;
          margin-bottom: 10px;

          .el-checkbox-button__inner {
            width: 100%;
            height: 100%;
            display: inline-block;
            background: no-repeat;
            color: #ffffff;
            box-shadow: none;
            border: 1px solid rgba(255, 255, 255, .7);
            border-radius: 4px;
          }
        }

      }
    }
  }

}
</style>
